"use strict";
import * as THREE from "https://unpkg.com/three@0.141.0/build/three.module";
import * as dat from "https://cdn.skypack.dev/dat.gui";


// Adding the gui //
const gui = new dat.GUI();
const world = {
    plane: {
        width: 10
    }
}
gui.add(world.plane, 'width', 1, 20).
onchange = function() {
    console.log(planeMesh.geometry);
    // planeMesh.geometry.dispose();
    // planeMesh.geometry = new THREE.planeGeometry(world.plane.width, 10, 10, 10);
}

// Instantiating scene, camera & renderer //
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

// Building the geometry & material //
const planeGeometry = new THREE.PlaneGeometry(10, 10, 10, 10);
const planeMaterial = new THREE.MeshPhongMaterial({ 
    color: 0xff0000,
    side: THREE.DoubleSide,
    flatShading: THREE.FlatShading
 });

// Binding the geometry and material //
const planeMesh = new THREE.Mesh(planeGeometry,planeMaterial);

// Adding the planeMesh to the scene // 
scene.add( planeMesh );

const {array} = planeMesh.geometry.attributes.position;
for(let i=0; i<array.length; i += 3){
    const x = array[i];
    const y = array[i+1];
    const z = array[i+2];
    array[i+2] = z + Math.random();
}

// Adding light //
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0,0,1);
scene.add(light);

// Animating & rendering the design //
function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
};

animate();